<template>
  <el-container>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="列转in" name="col2In">
        <col-to-in/>
      </el-tab-pane>
      <el-tab-pane label="列转foreach" name="col2Foreach">
        <col-to-foreach
            :in-foreach-prefix="inForeachPrefix"
            :out-foreach-prefix="outForeachPrefix"
            :suffix="suffix"
        />
      </el-tab-pane>
      <el-tab-pane label="批量插入" name="insertBatch">
        <insert-batch
            :in-foreach-prefix="inForeachPrefix"
            :out-foreach-prefix="outForeachPrefix"
            :suffix="suffix"
            :db-options="dbOptions"
        />
      </el-tab-pane>
      <el-tab-pane label="批量更新" name="updateBatch">
        <update-batch
            :in-foreach-prefix="inForeachPrefix"
            :out-foreach-prefix="outForeachPrefix"
            :suffix="suffix"
            :db-options="dbOptions"
        />
      </el-tab-pane>
      <el-tab-pane label="sql生成" name="sqlGenerator">
        <sql-generator
          :db-options="dbOptions"
          :generator-options="generatorOptions"
          :prefix="inForeachPrefix"
          :suffix="suffix"
        />
      </el-tab-pane>
      <el-tab-pane label="MybatisLogFormat" name="mybatisLogFormat">
        <mybatis-log-formatter />
      </el-tab-pane>
    </el-tabs>
  </el-container>
</template>
<script>
import ColToIn from "./tab/ColToIn.vue";
import ColToForeach from "./tab/ColToForeach.vue";
import InsertBatch from "./tab/InsertBatch.vue";
import UpdateBatch from "./tab/UpdateBatch.vue";
import SqlGenerator from "./tab/SqlGenerator.vue";
import MybatisLogFormatter from "./tab/MybatisLogFormter.vue";

export default {
  name: 'SqlConvert',
  components: {
    MybatisLogFormatter,
    ColToIn,
    ColToForeach,
    InsertBatch,
    UpdateBatch,
    SqlGenerator,
  },
  data() {
    return {
      activeName: 'col2In',
      inForeachPrefix: '<foreach collection="list" item="item" separator=",">\n',
      outForeachPrefix: '<foreach collection="list" item="item" open="(" separator="," close=")">\n',
      suffix: '\n</foreach>',
      dbOptions: [
        {
          label: 'mysql',
          value: 'mysql'
        },
        {
          label: 'oracle',
          value: 'oracle'
        },
        {
          label: 'postgresql',
          value: 'postgresql'
        }
      ],
      generatorOptions: [
        {
          label: "Entity",
          value: 'Entity'
        },
        {
          label: "Mapper",
          value: 'Mapper'
        },
        {
          label: "Controller",
          value: 'Controller'
        },
        {
          label: "Service",
          value: 'Service'
        },
        {
          label: "Impl",
          value: 'Impl'
        },
        {
          label: "Xml",
          value: 'Xml'
        },
        {
          label: "Result",
          value: "Result"
        },
        {
          label: "MockJs",
          value: 'MockJs'
        },
        {
          label: "ApiJs",
          value: 'ApiJs'
        },
        {
          label: "IndexVue",
          value: 'IndexVue'
        },
        {
          label: "FormVue",
          value: 'FormVue'
        },
        {
          label: "SearchButtons",
          value: "SearchButtons"
        }
      ]
    }
  },
  methods: {
    handleClick(tab) {
      this.activeName = tab.name
    }
  }
}
</script>
<style>
.el-tabs {
  width: 100%;
}
</style>
